<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
<template>
  <div class="scroll">
    <scroll class="infos_box">
      <!-- <div class="infos_title">
      <p>信息中心</p>
      </div>-->
      <div class="infos_center_box">
        <div
          class="infos_center_box_info"
          v-for="item in infoSort"
          :key="item.id"
          @click="infoItem(item)"
        >
          <dir class="infos_center_box_info_img">
            <img v-lazy="sueRecommendDataInfoImg(item.messageTypeId)" alt>
          </dir>
          <div class="infos_center_info_item">
            <div class="infos_center_info_item_title">
              <h2>{{item.messageTypeName}}</h2>
              <em
                v-if="item.messageDO"
              >{{item.messageDO.creationTs | dateFormat('yyyy/MM/dd hh:mm:ss')}}</em>
            </div>
            <div class="infos_center_info_item_info">
              <p v-if="item.messageDO">{{item.messageDO.messageContent}}</p>
              <i v-show="item.countType">{{item.countType}}</i>
            </div>
          </div>
        </div>
        <!-- loading 组件 -->
        <div v-show="!infoSort.length" class="loading-container">
          <joys-loading></joys-loading>
        </div>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
import Scroll from "@/components/JoysScroll/JoysScroll";
import JoysLoading from "@/components/JoysLoading/JoysLoading";
export default {
  name: "info",
  components: {
    Scroll,
    JoysLoading
  },

  data() {
    return {
      infoSort: [],
      aaa: {},
      infodata: [
        {
          id: 1,
          name: "合同变更",
          img: require("@/assets/img/Business@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          id: 2,
          name: "合同变更",
          img: require("@/assets/img/SystemBroadcast@3x.png"),
          time: "09:30:24",
          title:
            "湖南永旺机械合同变更打发士大夫敢死死队发货的风格上的嘎达嘎斯啊十分大师傅"
        },
        {
          id: 3,
          name: "合同变更",
          img: require("@/assets/img/Security@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/SystemSetting@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        },
        {
          name: "合同变更",
          img: require("@/assets/img/TaskNotice@3x.png"),
          time: "09:30:24",
          title: "湖南永旺机械合同变更"
        }
      ]
    };
  },
  methods: {
    // 请求类别数据
    infoSortList() {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-admin/messageType/abstract",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          // messageStatus: "UNREAD",
          // pageIndex: 1,
          // pageSize: 1000
        }
      })
        .then(res => {
          
          this.infoSort = res.data;
          console.log( this.infoSort, 'hhhh')
        })
        .catch(error => {
          console.log(error);
        });
    },
    sueRecommendDataInfoImg(id) {
      if (!id) {
        return require("@/assets/img/defaultImg.png");
      } else {
        return (
          this.$baseUrl+"/joys-rest/joys-file/file/browse/one2one/" +
          id +
          "?AUTH-TOKEN=" +
          localStorage.getItem("AUTH-TOKEN")
        );
      }
    },
    infoItem(item) {
      this.$router.push({
        path: `/info/${item.messageTypeId}`,
        query: {
          itemInfo: item
        }
      });
    }
  },
  mounted() {
    this.infoSortList();
  }
};
</script>

<style scoped lang="less">
.scroll{
  
.infos_box {
  position: fixed;
  top: 0.44rem;
  bottom: 0.58rem;
  width: 100%;
  // margin-top: 0.44rem;
  background-color: #fbf9fe;
  .infos_center_box {
    background: #ffffff;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    // padding-bottom: 0.47rem;
    .infos_center_box_info {
      overflow: hidden;
      padding-left: 0.6rem;
      .infos_center_box_info_img {
        float: left;
        width: 0.36rem;
        height: 0.36rem;
        margin: 0.12rem 0.11rem;
        margin-left: -0.5rem;
        border-radius: 0.18rem;
        img {
          width: 0.36rem;
          height: 0.36rem;
          margin: auto;
          margin-top: -0.13rem;
          // margin-left: 0.08rem;
          border-radius: 50%;
        }
      }
      .infos_center_info_item {
        width: 100%;
        // width: 2.87rem;
        height: 0.64rem;
        box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
        // background-color: red;
        float: left;
        .infos_center_info_item_title {
          overflow: hidden;

          // height: 0.24rem;
          h2 {
            float: left;
            font-family: Mediums;
            font-size: 0.15rem;
            color: #202f1f;
            letter-spacing: -0.41px;
            height: 0.24rem;
            line-height: 0.24rem;
            margin-top: 0.12rem;
          }
          em {
            float: right;
            font-family: Regular;
            font-size: 0.13rem;
            color: #adadad;
            letter-spacing: -0.36px;
            text-align: right;
            line-height: 0.13rem;
            margin-top: 0.12rem;
            margin-right: 0.18rem;
          }
        }
        .infos_center_info_item_info {
          overflow: hidden;
          height: 0.16rem;
          margin-right: 0.16rem;
          p {
            float: left;
            text-align: left;
            font-family: Regular;
            font-size: 0.13rem;
            color: #636363;
            letter-spacing: -0.36px;
            line-height: 0.16rem;
            width: 75%;
            height: 0.16rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          i {
            float: right;
            background: #ff2121;
            border-radius: 7px;
            height: 0.14rem;
            padding: 0 0.05rem;
            font-family: Regular;
            font-size: 0.12rem;
            color: #ffffff;
            letter-spacing: -0.29px;
            line-height: 0.14rem;
          }
        }
      }
    }
  }
}
}
</style>
<style>
  .pulldown-wrapper{
    /* display:none!important; */
  }
</style>